import React, { useEffect, useState } from 'react'
import { List, InputItem, Button, NavBar,Toast } from 'antd-mobile';
import "./Register.less"
import { reqregister } from '../../http/api';

export default function Register(props) {
    const [user, setuser] = useState({
        phone: "",
        nickname: "",
        password: ""
    })

    const register=()=>{
        reqregister(user).then(res=>{
            if(res.data.code===200){
                Toast.info(res.data.msg);
                // 跳转页面
                props.history.push("/login")
            }
        })
    }
    return (
        <div className="register">
            <div>{JSON.stringify(user)}</div>
            <NavBar className="nav" mode="dark">注册</NavBar>
            <div>
                <InputItem
                    clear
                    placeholder="请输入手机号"
                    onChange={(val) => setuser({...user,phone:val})}
                >手机号</InputItem>
                <InputItem
                    clear
                    placeholder="请输入昵称"
                    onChange={(val) => setuser({...user,nickname:val})}
                >昵称</InputItem>
                <InputItem
                    clear
                    placeholder="请输入密码"
                    onChange={(val) => setuser({...user,password:val})}
                >密码</InputItem>
                <List.Item>
                    <div>
                        <Button className="btn" type="primary" onClick={() => register()}>注册</Button>
                    </div>
                </List.Item>
            </div>
        </div>
    )
}
